<template>
  <el-dialog :visible.sync="choseLocShow" title="请选择经纬度"  width="1000px">
    <div class="iconBox">
      <div class="acea-row row-right">
        <div class="info-ditu">
          <div class="input-item">
            <div class="input-item-prepend">
              <span class="input-item-text" style="width:8rem;">请输入关键字</span>
            </div>
            <input id='tipinput' type="text" style=" border: 2px solid #000;">
          </div>
          
      </div>
      </div>
      <div id="map-container" class="map" tabindex="0" style="height:630px;width:100%">
      </div>
      <div style="display:flex;margin:15px 0;align-items: center;justify-content: flex-end; margin-right: 20px">
        <div>你选择的经纬度：{{lngLat}}</div>
        <el-button type="primary" style="margin-left:15px"  @click="chooseAddress">确认选择</el-button>
      </div>


    </div>
  </el-dialog>
</template>

<script>


export default {
  name: 'Index',
  data() {
    return {
      choseLocShow: false,
      map: null,
      isInitMapFirst: false,
      city: '',
      marker:'',
      lngLat:'',
      sourceData:{}
    }
  },
  mounted() {
    // this.initMap()
  },
  methods: {
    getSourceData(data){
      this.sourceData = data;
    },
    open(){
      this.choseLocShow = true;
    },
    close(){
      this.choseLocShow = false;
    },
    chooseAddress(){
      // this.$emit("getAddress", this.lngLat);
        if (!this.lngLat) {
          return this.$message.error('请先选择地点！')
        }
        this.$emit('getLngLat',this.lngLat, this.sourceData)
        this.choseLocShow = false;
    },

      // 初始化地图
    initMap(){
      var self = this
      if(this.isInitMapFirst) return;
      this.map = new AMap.Map('map-container', {
        center: [106.674463, 26.619523],
        resizeEnable: true,
        zoom: 10
      })
      this.isInitMapFirst = true;
      // 设置鼠标样式
      this.map.setDefaultCursor('crosshair')

      AMap.plugin([
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.HawkEye',
        // 'AMap.MapType',
        'AMap.Geolocation'
      ], function() {
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        self.map.addControl(new AMap.ToolBar())

        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        self.map.addControl(new AMap.Scale())

        // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
        self.map.addControl(new AMap.HawkEye({ isOpen: true }))

        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        // self.map.addControl(new AMap.MapType());

        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        self.map.addControl(new AMap.Geolocation())
      })

      // 添加定位
      this.addAMapGeolocation()
      // 添加检索提示
      this.addAMapAutocompletePlaceSearch()

      this.initClick()
    },

    initClick(){
      var self = this
      this.map.on('click', function(e) {
        console.log('e',e)
        if (self.marker) {
          self.marker.setMap(null);
          self.marker = null;
        }
        self.marker = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: [e.lnglat.lng,e.lnglat.lat],
            offset: new AMap.Pixel(-13, -30)
        });
        self.lngLat = e.lnglat.lng+';'+e.lnglat.lat
        self.marker.setMap(this.map);
      
      })
    },
     // 添加自动定位
     addAMapGeolocation() {
      this.map.plugin('AMap.Geolocation', () => {
        const geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量
          offset: [10, 20],
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          position: 'RB'
        })
        geolocation.getCurrentPosition(function(status, result) {
          if (status == 'complete') {
            onComplete(result)
          } else {
            onError(result)
          }
        })

        function onComplete(res) {
          // data是具体的定位信息
          // 添加maker
          const lnglat = [res.position.lng, res.position.lat]
          this.map.setCenter(lnglat)
          console.log('定位成功----', res)
        }

        function onError(err) {
          // 定位出错
          console.log('定位出错----', err)
        }
      })
    },
    
    // 添加检索提示检索
    addAMapAutocompletePlaceSearch() {
      // 自动提示
      // AMap.plugin('AMap.AutoComplete', () => {
      //   const auto = new AMap.Autocomplete({
      //     city: this.city,
      //     input: 'tipinput'
      //   });

      //   // 添加检索监听
      //   AMap.event.addListener(auto, 'select', this.onSelectAutocomplete);
      // });
      var that = this
      // 输入提示
      var autoOptions = {
        city: this.city,
        input: 'tipinput'
      }

      AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function() {
        var auto = new AMap.AutoComplete(autoOptions)
        var placeSearch = new AMap.PlaceSearch({
          map: that.map
        }) // 构造地点查询类
        auto.on('select', select)// 注册监听，当选中某条记录时会触发
        function select(e) {
          // placeSearch.setCity(e.poi.adcode);
          // placeSearch.search(e.poi.name);  //关键字查询查询
          console.log(555, e)
          if (!e.poi.location) {
            return that.$message.error('这不是一个地点，请重新选择！')
          }
          const lnglat = [e.poi.location.lng, e.poi.location.lat]
          that.map.setCenter(lnglat)
          that.map.setZoom(18)

          // this.marker.setPosition(lnglat);
          // this.setMaker();
          // 构造点标记
          if(that.tempMarker) {
            that.map.remove(that.tempMarker)
          }
          
          that.tempMarker = new AMap.Marker({
            icon: require('@/assets/images/mark_b.png'),
            position: lnglat
          })
          that.map.add(that.tempMarker)
          // that.map.setFitView()
        }
      })
    },
    // generateElementIconCode(symbol) {
    //   return `<i class="el-icon-${symbol}" />`
    // },
    // handleClipboard(text, event, n) {
    //   this.iconChange(n)
    //   //  clipboard(text, event)
    // },
    // // 搜索
    // upIcon(n) {
    //   const arrs = []
    //   for (var i = 0; i < this.elementIcons.length; i++) {
    //     if (this.elementIcons[i].indexOf(n) !== -1) {
    //       arrs.push(this.elementIcons[i])
    //       this.list = arrs
    //     }
    //   }
    // },
    // iconChange(n) {
    //   /* eslint-disable */
    //     form_create_helper.set(this.$route.query.field, n)
    //     form_create_helper.close('icon');
    //   }
    }
  }
</script>

<style lang="scss" >
  .icons-container {
    margin: 10px 20px 0;
    overflow: hidden;

    .grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .icon-item {
      margin: 10px 20px;
      text-align: center;
      width: 100px;
      float: left;
      font-size: 30px;
      color: #24292e;
      cursor: pointer;
    }

    span {
      display: block;
      font-size: 16px;
      margin-top: 10px;
    }

    .disabled {
      pointer-events: none;
    }
  }

  .info-ditu hr {
    margin-right: 0;
    margin-left: 0;
    border-top-color: grey;
  }
  
  .info-ditu {
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: .25rem;
    position: absolute;
    // top: 6rem;
    background-color: white;
    width: auto;
    min-width: 200px;
    border-width: 0;
    right: 1rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    z-index: 1;
    margin: 15px;
  }
  .input-item {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 3rem;
  }
  
  .input-item:last-child {
    margin-bottom: 0;
  }
  
  .input-item>select, .input-item>input[type=text], .input-item>input[type=date] {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
  }
  
  .input-item>select:not(:last-child), .input-item>input[type=text]:not(:last-child), .input-item>input[type=date]:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
  }
  
  .input-item>select:not(:first-child), .input-item>input[type=text]:not(:first-child), .input-item>input[type=date]:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
  }
  
  .input-item-prepend {
    margin-right: -1px;
  }
  
  .input-item-text, input[type=text],input[type=date], select {
    height: calc(2.2rem + 2px);
  }
  
  .input-item-text {
    width: 6rem;
    text-align: justify;
    padding: 0.4rem 0.7rem;
    display: inline-block;
    text-justify: distribute-all-lines;
    /*ie6-8*/
    text-align-last: justify;
    /* ie9*/
    -moz-text-align-last: justify;
    /*ff*/
    -webkit-text-align-last: justify;
    /*chrome 20+*/
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  
  .input-item-text input[type=checkbox], .input-item-text input[type=radio] {
    margin-top: 0
  }
  
  .input-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: .25rem;
    width: 22rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
  }
  
  .input-text {
    line-height: 2rem;
    margin-right: 2rem;
  }
  ::v-deep .amap-sug-result {
    visibility: visible;
     z-index: 99999 !important;
   }
   ::v-deep {
    .amap-sug-result {
       z-index: 99999 !important;
     }
  }
</style>
